<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--1、引入react核心文件-->
    <script src="./js/react.development.js"></script>
    <!--2、引入react操作DOM的核心文件-->
    <script src="./js/react-dom.development.js"></script>
    <!--3、当需要书写JSX结构的时候，引入babel文件-->
    <script src="./js/babel.min.js"></script>
    <style>
        header {
            width: 100%;
            height: 100px;
            background: red;
            margin-bottom: 10px;
        }

        main {
            width: 100%;
            height: 100px;
            background: orangered;
            margin-bottom: 10px;
        }

        footer {
            width: 100%;
            height: 100px;
            background: purple;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <!--4、创建容器元素-->
    <div id="root"></div>
    <!--
        React特点其中包含：组件化
        模块化(工程)、组件化(框架)
        产生的核心：复用
        模块化：是想要将一些公共的js功能函数单独放在一个js文件，哪一个文件需要，被应用  const 常量 = require('./A.js') module.exports = {xxxx}
        组件化：是将html标签、css样式、js代码独立成一个组件进行复用
               双：<标签></标签>
               单：<标签/>
               如果调用的时候首字母大写，则是组件标签；否则是html普通的标签
               <div></div>
               <MyCom></MyCom>
                组件标签调用的其实就是复用的代码片段，后期可以根据数据的多少进行遍历
        
        组件有几类？怎么用？
        组件有两类：一类是函数式组件（重点）；另一类是类式组件


        类的定义：class
        类的继承：extends

        所有咱们程序员自己声明的类式组件必须继承React下的Component作为父类
    -->
    <!--5、设置script标签中内容类型为:text/babel-->
    <script type="text/babel">
        //6、创建容器对象
        let root = ReactDOM.createRoot(document.querySelector('#root'));
        //7、类式组件
        // console.dir(React.Component)
        //解构
        const { Component } = React;
        //父组件
        class App extends Component {
            //这种属性名 = 值的赋值方式也是写入到了组件实例化对象身上
            address = '北京市';
            //构造器和render方法都是自动执行，且先执行构造器，在执行render
            constructor() {
                //调用父类的构造器
                super();
                //目的是为了在App这个组件实例化对象身上添加一些初始化的属性值/初始的动作
                //如果想要在构造器中进行一些初始化，有可能是和修改this指向相关
                this.a = 1;
                //测试组件实例化的对象结构
                console.log(this);

                console.log('我是个构造器....');
            }
            //原型对象上
            render() {
                console.log('我是render方法....');
                console.log('render中的this', this);  //a1.render();
                console.log('render中的this', this.a);  //a1.render();
                console.log('render中的this', this.address);  //a1.render();
                return <div>
                    <Header></Header>
                    <Header></Header>
                    <Header></Header>
                    <Header></Header>
                    <Main />
                    <Footer></Footer>
                    <p>地址：{this.address}</p>
                </div>;
            }
        }
        // console.dir(App);

        //子组件
        class Header extends Component {
            render() {
                return (
                    <div>
                        <header>头部</header><button></button>
                    </div>
                )

            }
        }

        class Main extends Component {
            render() {
                return <main>中间</main>
            }
        }

        class Footer extends Component {
            render() {
                return <footer>中间</footer>
            }
        }
        //8、渲染
        root.render(<App />); // let a1 = new App()


        /* class Student{

        }
        let s1 = new Student(); */


    </script>
</body>

</html>